<template>
	<view class="main">
		<view class="header">
			<image @tap="routerBack()" class="back" src="@/static/img/backIcon.png" mode=""></image>
			<u-swiper :list="list1"  height="100vw" :autoplay="false" imgMode="scaleToFill"></u-swiper>
			<view class="price">
				<p>￥{{data.member_price}}</p>
			</view>
		</view>
		<view class="content">
			<view class="tit">{{data.name}}</view>
			<view class="msg">{{data.intro}}</view>
		</view>
		<!-- <view class="num">
			<p class="msg">销量</p>
			<p>{{data.goods_num}}</p>
		</view> -->
		<view class="detail">
			<u-tabs class="tab" :activeStyle="{
			         color: '#EA504F',
			         fontWeight: 'bold',
			     }" :inactiveStyle="{
			         color: '#000',
			     }" :current="current" :list="tabs" @click="handleTab" lineColor="#EA504F"></u-tabs>
			<view class="detailBox" v-if="tabIndex == 0">
				<u-parse :content="data.goods_detail"></u-parse>
			</view>
			<view class="detailBox" v-else>
				<view class="evaluate" v-for="(item, index) in evaluateLists" :key="index">
					<view class="top">
						<u-rate :count="5" v-model="item.num" activeColor="#F5A504"></u-rate>
						<view class="name">{{item.name}}</view>
					</view>
					<view class="desc">{{item.desc}}</view>
				</view>
				<u-empty v-if="evaluateLists.length == 0" text="暂无评价"></u-empty>
			</view>
		</view>
		<view class="bottom">
			<view class="one" @tap="goIndex">
				<image src="@/static/img/tabbar/home.png" mode=""></image>
				<view class="msg">首页</view>
			</view>
			<!-- <view class="one">
				<image src="@/static/img/collect.png" mode=""></image>
					<view class="msg">收藏</view>
			</view> -->
			<view class="two">
				<view class="btn now" @tap="show = true">立即购买</view>
			</view>
		</view>
		<u-popup :show="show" :round="10" @close="show = false" :closeable="true">
			<view class="popup">
				<view class="popupHeader">
					<view class="imgBox">
						<image :src="data.image" mode=""></image>
					</view>
					<view class="txt">
						<view class="name">
							{{ data.name }}
						</view>
						<view class="price">￥{{ skuData.price }}</view>
					</view>
				</view>
				<view class="popupCon">
					<view class="skuBox" v-for="(item, index) in attrsList" :key="index">
						<view class="name">
							{{ item.name }}
						</view>
						<view class="itemBox">
							<view @tap="seleSku(item, sitem, sindex)" :class="{ item: true, active: currentIndex == sindex }"
								v-for="(sitem, sindex) in item.sons" :key="sindex">
								{{ sitem.name }}
							</view>
						</view>
					</view>
					<view class="popupNum" v-if="isSeckill == 0">
						<view class="msg">购买数量</view>
						<u-number-box class="numBox" v-model="value">
							<view slot="minus" class="minus">
								<image style="width: 44rpx; height: 44rpx;" src="@/static/img/minus.png" mode="">
								</image>
							</view>
							<text slot="input" style="width: 50px; text-align: center" class="input">{{ value }}</text>
							<view slot="plus" class="plus">
								<image style="width: 44rpx; height: 44rpx;" src="@/static/img/plus.png" mode="">
								</image>
							</view>
						</u-number-box>
					</view>
				</view>
				<view class="popupbottom">
					<view class="disBtn cart" @tap="addCart">加入购物车</view>
					<view class="disBtn now" @tap="bayNow">立即购买</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		 detail,
		 sku,
		 preOrder,
		 cartCreate
	} from '@/api/index.js'
	export default {
		data() {
			return {
				list1: [],
				value: 1,
				show: false,
				data:{},
				id:'',
				attrsList: [],
				attrs: [],
				attrssons: [],
				skuData:{},
				isSeckill:0,
				tabs: [{
						name: '商品详情',
						id: -1
					},
					// {
					// 	name: '商品评价',
					// 	id: 1
					// }
				],
				current: 0,
				tabIndex: 0,
				currentIndex: 0,
				evaluateLists: [
					{
						num: 3,
						desc: '3214374839209',
						name: '李四'
					},
					{
						num: 3,
						desc: '3214374839209',
						name: '李四'
					},
					{
						num: 3,
						desc: '3214374839209',
						name: '李四'
					},
					{
						num: 3,
						desc: '3214374839209',
						name: '李四'
					}
				]
			};
		},
		onLoad(e) {
			this.id = e.id
			if(e.isSeckill){
				this.isSeckill = e.isSeckill
			}
			this.getDetail()
		},
		onShow() {},
		methods: {
			async bayNow(){
				let res = await preOrder({
					data:`sku_id:${this.skuData.id},number:${this.value}`
				})
				console.log(res)
				if(res.code == 1){
					uni.navigateTo({
						url:`/pageB/orderPay?tag=${res.data}`
					})
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			
			async addCart () {
				let res = await cartCreate({
					sku_id: this.skuData.id,
					number: this.value
				})
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				if (res.code == 1) {
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/cart/cart'
						})
					}, 1200)
				}
			},
			
			async getDetail(){
				let res = await detail({
					id:this.id
				})
				if(res.code == 1){
					this.data = res.data
					this.list1 = res.data.pics
					this.attrsList = this.data.attrs
					this.attrsList.forEach(item => {
						item.sele = 0
					})
					this.attrsList.forEach(item => {
						this.attrs.push(item.id)
						this.attrssons.push(item.sons[0].id)
					})
					console.log(this.attrsList);
					let skus = ''
					skus = this.attrs.map((item,index) => {
						return `${item}:${this.attrssons[index]}`;
					}).join(',')
					this.getSku(skus)
				}
			},
			seleSku( item,sitem,index) {
				this.currentIndex = index;
				console.log(this.currentIndex);
				let i = this.attrsList.findIndex(obj => obj.id === item.id);
				item.sele = index
				this.attrsList.splice(i, 1, item)
				let a = this.attrs.indexOf(item.id)
				this.attrssons[a] = sitem.id
				let skus = ''
				skus = this.attrs.map((item,index) => {
					return `${item}:${this.attrssons[index]}`;
				}).join(',')
				this.getSkus(skus)
			},
			async getSku(skus){
				let res = await sku({
					product_id:this.id,
					attrs:skus
				})
				if (res.code == 1) {
					this.isBay = true
					this.skuData = res.data
					console.log(this.skuData)
				} else {
					this.isBay = false
					this.skuData = {
						id: '',
						price: 0,
						stock: 0
					}
				}
			},
			async getSkus(skus){
				let res = await sku({
					product_id:this.id,
					attrs:skus
				})
				if (res.code == 1) {
					this.isBay = true
					this.skuData = res.data
					console.log(this.skuData)
				} else {
					this.isBay = false
					this.skuData = {
						id: '',
						price: 0,
						stock: 0
					}
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			routerBack() {
				uni.navigateBack();
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			routerTo(url){
				uni.navigateTo({
					url:url
				})
			},
			handleTab (e) {
				console.log(e, this.current, 'e')
				this.tabIndex = e.index
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		background-color: #f6f6f6;
		padding-bottom: 140rpx;

		.slot-content {
			padding: 30rpx 55rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.close {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 30rpx;
				right: 0;
			}

			.tit {
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.img {
				width: 232rpx;
				height: 232rpx;
				margin: 50rpx 0;
			}

			.msg {
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}

		.header {
			position: relative;

			.back {
				width: 60rpx;
				height: 60rpx;
				position: fixed;
				top: 100rpx;
				left: 30rpx;
				z-index: 100;
			}

			.price {
				padding: 30rpx;
				background-color: #EA504F;

				p {
					color: #fff;
					font-weight: 700;
				}
			}
		}

		.content {
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin-bottom: 2rpx;

			.tit {
				width: 100%;
				color: #000;
				margin-bottom: 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.msg {
				font-size: 28rpx;
				color: #000;
			}

			.tag {
				display: inline-block;
				font-size: 20rpx;
				padding: 5rpx 10rpx;
				background-color: #0a7ef3;
				color: #fff;
				border-radius: 8rpx;
				margin-bottom: 10rpx;
			}
		}

		.num {
			background-color: #25A664;
			padding: 30rpx 34rpx;
			font-size: 26rpx;
			display: flex;
			margin-bottom: 20rpx;

			.msg {
				margin-right: 20rpx;
				color: #898989;
			}
		}

		.detail {
			padding: 30rpx 30rpx;
			background-color: #fff;
			.detailBox {
				padding-bottom: 40rpx;

				::v-deep img {
					width: 100% !important;
					float: none !important;
				}

				::v-deep p {
					width: 100%;
					margin-bottom: 10rpx;
				}

				h2 {
					font-size: 30rpx;
					color: #083326;
					margin-bottom: 20rpx;
				}
				
				.evaluate {
					border-bottom: 1rpx solid #ccc;
					padding: 24rpx 0;
					box-sizing: border-box;
					
					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 24rpx;
					}
					
					.desc {
						font-size: 28rpx;
						word-break: break-all;
					}
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx 40rpx 30rpx;
			background-color: #fff;

			button {
				padding: 0;
				margin: 0;
				line-height: 20rpx;
				border-radius: 0;
			}

			button::after {
				border: none;
			}

			.one {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20rpx;
				color: #232323;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 6rpx;
				}
			}

			.two {
				width: 70%;
				display: flex;

				.btn {
					flex: 1;
					font-size: 24rpx;
					color: #fff;
					padding: 20rpx 40rpx;
					border-radius: 200rpx;
					text-align: center;
				}
				.cart {
					background-color: #313132;
				}

				.now {
					background-color: #EA504F;
				}
			}

		}

		.popup {
			padding: 70rpx 30rpx 0;
			background-color: #fff;
			.popupHeader {
				display: flex;
				margin-bottom: 44rpx;

				.imgBox {
					margin-right: 30rpx;

					image {
						width: 160rpx;
						height: 120rpx;
						border-radius: 10rpx;
					}
				}

				.txt {
					font-size: 28rpx;
					height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					color: #000;

					.price {
						color: #000;
						font-size: 32rpx;
						font-weight: 700;
					}
				}
			}

			.popupCon {
				padding-bottom: 60rpx;

				.skuBox {
					margin-bottom: 30rpx;

					.name {
						color: #232323;
						font-size: 28rpx;
						margin-bottom: 30rpx;
					}

					.itemBox {
						display: flex;
						flex-wrap: wrap;

						.item {
							min-width: 146rpx;
							text-align: center;
							padding: 16rpx 0;
							border-radius: 2000rpx;
							background-color: #f8f9fc;
							font-size: 28rpx;
							margin-right: 34rpx;
							margin-bottom: 30rpx;
							color: #232323;
						}

						.active {
							background-color: #EA504F;
							color: #fff;
						}
					}
				}

				.popupNum {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.numBox {
						align-items: center;

						.minus {
							width: 44rpx;
							height: 44rpx;

							::v-deep image {
								width: 100%;
								height: 100%;
								vertical-align: top;
							}
						}

						.input {
							padding: 0 10rpx;
						}

						.plus {
							::v-deep image {
								width: 100%;
								height: 100%;
								vertical-align: top;
							}
						}
					}
				}
			}

			.popupbottom {
				background-color: #fff;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				gap: 24rpx;
				box-sizing: border-box;

				.btn {
					width: 50%;
					font-size: 24rpx;
					color: #fff;
					padding: 20rpx 0;
					text-align: center;
				}

				.now {
					background-color: #0a84ff;
				}

				.disBtn {
					flex: 1;
					font-size: 24rpx;
					color: #fff;
					padding: 20rpx 0;
					text-align: center;
					border-radius: 200rpx;
					background-color: #666666;
					box-sizing: border-box;
				}
				.now{
					background-color: #EA504F;
				}

				.cart {
					background-color: #f9ae3d;
				}
			}
		}
	}
	::v-deep .u-tabs__wrapper__nav {
		justify-content: space-around;
	}
	::v-deep .u-tabs__wrapper__nav__line {
		height: 0rpx !important;
	}
</style>